<template>
    <div class="hot-nav">
      <!--滚动区域-->
      <div class="hot-nav-content">
        <div class="nav-content-inner">
          <a class="inner-item" v-for="(nav,index) in homenav" :key="index">
            <img :src="nav.iconurl" alt="">
            <span>{{nav.icontitle}}</span>
          </a>
        </div>
      </div>
      <!--自定义进度条-->
      <div class="hot-nav-bottom">
        <div class="hot-nav-bottom-inner" :style="innerBarStyle"></div>
      </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: 'HotNav',
        data(){
          return {
            // 1.屏幕宽度,记得兼容性处理
            screenW: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            // 2.滚动内容的宽度
            scrollContentW: 720,
            // 3.滚动条背景的长度
            bgBarW: 100,
            // 4.滚动条的长度
            barXW: 0,

            // 1.移动的起点
            startX: 0,
            // 2.记录结束点
            endFlag: 0,
            // 3.移动的距离
            barMoveX: 0,
            // 服务器图片后续实现，先写成本地静态图片
            imgArray:[
              {imgURL:require('../img/nav/nav_icon01.png')},
              {imgURL:require('../img/nav/nav_icon02.png')},
              {imgURL:require('../img/nav/nav_icon03.png')},
              {imgURL:require('../img/nav/nav_icon04.png')},
              {imgURL:require('../img/nav/nav_icon05.png')},
              {imgURL:require('../img/nav/nav_icon06.gif')},
              {imgURL:require('../img/nav/nav_icon07.png')},
              {imgURL:require('../img/nav/nav_icon08.png')},
              {imgURL:require('../img/nav/nav_icon09.png')},
              {imgURL:require('../img/nav/nav_icon10.png')},
              {imgURL:require('../img/nav/nav_icon11.png')},
              {imgURL:require('../img/nav/nav_icon12.png')},
              {imgURL:require('../img/nav/nav_icon13.png')},
              {imgURL:require('../img/nav/nav_icon14.png')},
              {imgURL:require('../img/nav/nav_icon15.png')},
              {imgURL:require('../img/nav/nav_icon16.png')},
            ]
          }
        },
        computed: {
          ...mapState(['homenav']),

          // 使用计算属性设置bar的宽度
          innerBarStyle(){
            return {
              width: `${this.barXW}px`,
              left: `${this.barMoveX}px`
            }
          }
        },
        mounted(){
          this.getBottomBarWidth();
          this.bindEvent();
        },
        methods: {
          getBottomBarWidth(){
            this.barXW = (this.screenW/this.scrollContentW) * this.bgBarW;
          },
          // 移动端事件监听,用来处理自定义Bar的移动
          bindEvent(){
            this.$el.addEventListener('touchstart',this.handleTouchStart,false);
            this.$el.addEventListener('touchmove',this.handleMoveStart,false);
            this.$el.addEventListener('touchend',this.handleTouchEnd,false);
          },
          // 开始触摸
          handleTouchStart(event){
            // 1.获取第一个触点对象
            let touch = event.touches[0];
            // 2.得到起始点X坐标
            this.startX = Number(touch.pageX);
          },
          // 开始移动
          handleMoveStart(event){
            // 1.获取实时移动的点的对象
            let touch = event.touches[0];
            // 2.计算出移动的距离
            let moveX = Number(touch.pageX) - this.startX;
            // 3.求出滚动条走的距离
            this.barMoveX = -((this.bgBarW / this.scrollContentW) * moveX - this.endFlag);
            // 4.边界值处理
            if(this.barMoveX<=0){
              // 左边
              this.barMoveX = 0;
            }else if(this.barMoveX >= this.bgBarW - this.barXW){
              // 右边
              this.barMoveX =  this.bgBarW - this.barXW
            }
          },
          // 结束触摸
          handleTouchEnd(event){
            this.endFlag = this.barMoveX;
          }
        },
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .hot-nav
    width 100%
    height 180px
    position relative
    background-color: #fff
    padding-bottom 10px
    .hot-nav-content
      width 100%
      overflow-x: scroll
      .nav-content-inner
        width 720px
        height 180px
        display flex
        flex-wrap wrap
        .inner-item
          display flex
          width 90px
          height 90px
          flex-direction column
          justify-content center
          align-items center
          font-size 14px
          color #666
          img
            width 40%
            margin-bottom 5px
  /*去除系统滚动条(专业术语scrollbar)，使用自定义滚动条；去除有两种方式一种是通过css3的伪元素来做，一种是通过js来做   */
  .hot-nav-content::-webkit-scrollbar
    display none
  .hot-nav-bottom
    width 100px
    height 2px
    background-color: #ccc
    position absolute
    left 50%
    margin-left -50px
    bottom 8px
    .hot-nav-bottom-inner
      position absolute
      left 0
      height 100%
      background-color: orangered
      width 0
</style>
